<template>
    <div>
        <div class="body-content">
            <div class="content-main">
                <div style="background: #F5F5F5;" v-if="countryJson">
                    <div class="gj-banner" :style="{'background-image': 'url('+getImage(countryJson.mainImage)+')'}">
                        <div class="w">
                            <p class="adapt-pc">
                                <img style="width:74px;height:49px;margin-top: -20px;" :src="getImage(countryJson.icon)" alt="">
                                <span>&nbsp;{{countryJson.name}}移民</span><!-- 移民的特点&优势 -->
                            </p>
                            <div class="adapt-m" style="margin-left: 10px;" v-if="countryJson">
                                <img style="margin-top: 80px;" :src="getImage(countryJson.icon)" alt="">
                                <span style="margin-top: 80px;">{{countryJson.name}}</span>
                                <div style="clear: left;"></div>
                            </div>
                            <!-- <p class="adapt-m">移民的特点&优势</p> -->
                            <p class="adapt-pc" style="font-family: PingFangSC-Light; font-size: 24px; color: #FFFFFF; margin-top: -90px;">移民特点及优势</p>
                            <p class="adapt-m" style="font-family: PingFangSC-Light; font-size: 24px; color: #FFFFFF; margin-left: 10px; margin-top: -6px;">移民特点及优势</p>
                            <ul id="contentArea">
                                <li><!-- <i>•</i> -->{{countryJson.name}}移民条件：{{countryJson.immigrateRequirement}}
                                </li>
                                <li><!-- <i>•</i> -->{{countryJson.name}}移民政策：{{countryJson.immigratePolicy}}
                                </li>
                                <li><!-- <i>•</i> -->{{countryJson.name}}移民费用：{{countryJson.immigrateFee}}</li>
                            </ul>
                                <router-link to="evaluate" class="Js-zixun">获取专属移民规划</router-link>
                        </div>
                    </div>
                </div>
                <div class="swiper-container banner-swiper project-banner" style="display: none;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="@/assets/picture/1.jpg"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="@/assets/picture/2.jpg"/>
                        </div>
                        <div class="swiper-slide">
                            <img src="@/assets/picture/3.jpg"/>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="gj-main">
                    <div class="list" style="padding:0;">
                        <!-- 移动端 -->
                        <div class="w sousuo adapt-m" v-if="!this.countryId">
                            <ul class="country_a">
                                <li><a :class="[actionTab == 0? 'action' : '']" @click="countryTabBtn()">不限</a></li>
                                <li v-for="(it,index) in countrylist" :key="index" v-if="countrylist.length > 0">
                                    <a :class="[actionTab == (index+1)? 'action' : '']" @click="countryTabBtn(it.id, index+1)">{{it.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="w box adapt-m">
                            <div class="min_box m" v-for="(item,index) in projectlist" :key="index">
                                <router-link :to="{path:'/ProjectDetail',query:{id:item.id}}">
                                    <div class="img" :style="{'background-image': 'url('+getImage(item.projectImage)+')'}"></div>
                                    <div class="rig_box">
                                        <p class="h1">{{item.projectName}}</p>
                                        <p class="star_m star_5">
                                            <img src="@/assets/image/star.png" style="width: 16px;height: 16px;margin-right:5px;"
                                                v-for="i in item.recommendIndex" :key="i"/>
                                        </p>
                                        <p class="cons">推荐理由:&nbsp;&nbsp;&nbsp;{{item.recommendReason}}</p>
                                        <p class="i">
                                            <i class="biaoqian " style=' color:#fff; background-color:rgb(110 176 24);' v-for="(t,index) in item.tags" :key="index">{{t}}</i>
                                        </p>
                                    </div>
                                </router-link>
                            </div>
                        </div>

                        <!-- PC -->
                        <div class="w sousuo adapt-pc" id="Js_search" style="display: none;">
                            <span>意向国家：</span>
                            <ul class="country_a">
                                <li><a :class="[actionTab == 0? 'action' : '']" @click="countryTabBtn()">不限</a></li>
                                <li v-for="(it,index) in countrylist" :key="index">
                                    <a :class="[actionTab == (index+1)? 'action' : '']" @click="countryTabBtn(it.id, index+1)">{{it.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="w box adapt-pc" style="padding: 20px 0 1px;">
                            <p class="h2" v-if="countryJson">{{this.countryId ? countryJson.name : '发现适合您的'}}移民项目</p>
                            <div id="Js_data">
                                <div class="min_box"  v-for="(item,index) in projectlist" :key="index">
                                    <div class="btn Js-zixun">马上咨询</div>
                                    <router-link :to="{path:'/ProjectDetail',query:{id:item.id}}">
                                        <div class="img" :style="{'background-image': 'url('+getImage(item.projectImage)+')'}"></div>
                                        <div class="img-rightinfo">
                                            <p class="fleft t" style="color: rgb(43, 45, 46);">
                                                <!--<img src="/Public/Admin/Uploads/2017-08-24/599e2fed76c70.png" alt="">-->
                                                {{item.projectName}}<em style="color: rgb(202, 204, 205);">详情 &gt;&gt;</em>
                                            </p>
                                            <div style="display: flex; align-items: center; width: 100%;">
                                                <span class="fleft s">推荐指数 </span>
                                                <div class="star_5" style="display:flex;margin-left:10px;">
                                                    <img src="@/assets/image/star.png" style="width: 16px;height: 16px;margin-right:5px;"
                                                         v-for="i in item.recommendIndex" :key="i"/>
                                                </div>
                                            </div>
                                            <div class="con">{{item.recommendReason}}</div>
                                            <div class="con-label">
                                                <i class="biaoqian" v-for="t in item.tags" style=" color:#fff; background-color:#9AE03F;">{{t}}</i>
                                            </div>
                                        </div>
                                    </router-link>
                                </div>
                            </div>

                            <div class="add" v-if="totalPage > limit" @click="addPushList">浏览更多</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>
<script>
import loading from "@/components/loading.vue";
import Swiper from 'swiper'
import { mapGetters } from 'vuex'
import httpApi from '@/api/index'
export default {
    data(){
        return{
            photo:[
                {img:'../../assets/picture/1.jpg'},
                {img:'@/assets/picture/2.jpg'},
                {img:'@/assets/picture/3.jpg'},
                {img:'@/assets/picture/4.jpg'},
            ],
            countrylist:[],
            projectlist:[],
            tag:[],
            id:'',
            actionTab: 0,
            countryJson: null,
            totalPage: 0,
            pageIndex: 1,
            limit: 10,
            loadingState: true
        }
    },
    created () {
        this.countryId = this.$route.query.id;
    },
    mounted() {
        this.getcountry();
        this.getProjectList(this.pageIndex);
        document.addEventListener('click', this.clickOut);
        this.$router.afterEach((to,form)=>{
            if(to.path === form.path){
                this.$nextTick(()=>{
                    location.reload()
                })
            }
        })
    },
    methods: {
        countryTabBtn(id, index) {
            this.projectlist = [];
            this.countryId = id;
            this.getProjectList(1);
            if(index){
                this.actionTab = index;
            }else{
                this.actionTab = 0;
            }
        },
        addPushList() {
            this.pageIndex++;
            this.getProjectList(this.pageIndex);
        },

        getcountry(){
            httpApi.getcountryAll().then(res => {
                this.countrylist = res.data;
                this.countrylist.forEach(item => {
                    if(item.id == this.countryId){
                        this.countryJson = item;
                    }
                });
            });
        },
        getProjectList(pageIndex){
            let params = {
                countryId: this.countryId ? this.countryId : "",
                limit: this.limit,
                page: pageIndex
            };
            httpApi.getProjectList(params).then(res => {
                if(res.data.length > 0){
                    res.data.forEach(item => {
                        item.tags = item.tags.split("###");
                        this.projectlist.push(item);
                    });
                    this.totalPage = res.total;
                }else{
                    this.totalPage = 0;
                }
                this.loadingState = false;
            });
        },
        getSwiper() {
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                    dynamicMainBullets: 2,
                    clickable: true,
                },
            })
        },
        getImage(url){
            return this.baseApi + url;
        },
    },
    name: "Project",
    components: {
        loading
    },
    computed: {
        ...mapGetters([ 'baseApi' ])
    },
}
</script>
<style lang="scss" scoped>
@import "src/assets/css/project-index";
.body-content{
    .project-banner{
        height: 300px;
        .swiper-pagination{
            bottom: 20px;
            text-align: center;
            width: 200px !important;
            margin-left: -50px;
        }
    }
    .pro-menu{
        display: flex;
        align-items: center;
        .pro-list {
            font-size: 18px;
            font-weight: 400;
            color: #100D24;
            margin-right:20px;
            position: relative;
            //line-height: 0;
            display: flex;
            align-items: center;
            position: relative;
            justify-content: center;
            overflow: hidden;
            padding: 8px 8px;
            }

            .active {
                padding: 8px 8px;
                font-size: 18px;
                font-weight: 500;
                color: #087383;
                //line-height: 0;
                display: flex;
                align-items: center;
            }
    }
    .projeft-mobile{
        position: absolute;
        top: 102px;
        background: rgb(255, 255, 255);
        width: 100%;
        height: 300px;
        font-size: 18px;
        padding: 20px;
        box-shadow: 0px 2px 8px 0px rgba(16,13,36,0.12);
        overflow-y: auto;
        z-index: 99;
        .pro-m{
            .pro-boxc{
                margin-bottom: 16px;
                .p-name{
                    font-size: 18px;
                    font-weight: 500;
                    color: #100D24;
                }
                .p-contry{
                    display: flex;
                    font-size: 14px;
                    margin-top: 8px;
                    dd{
                        margin-right: 16px;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    .gj-banner{
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        height: 430px;
    }
}
@media only screen and (max-width: 960px) {
    .sousuo{
        padding: 10px 20px;
    }
}
</style>